<template>
    <div>
        <v-dialog
            title="查看"
            :show.sync="dialogVisible"
            :destroy-on-close="true"
            @beforeClose="beforeClose"
            width="1200px"
        >
            <div class="card-box">
                <div class="data-title" style="margin-left: 20px">基本信息</div>
                <div class="info-list mb20"><span style="font-size: 16px ; text-blink: #000">{{form.projectName}}</span>
                </div>
                <el-form class="card-box">
                    <div class="info-list mb20" style="font-size: 16px">
                        <dl>
                            <dt>建筑面积(m²)</dt>
                            <dd>{{form.buildingArea}}</dd>
                        </dl>
                        <dl>
                            <dt>月租金(元)</dt>
                            <dd>{{form.rentAmount}}</dd>
                        </dl>
                        <dl>
                            <dt>合同期限</dt>
                            <dd>{{form.costPeriodStart}}至{{form.costPeriodEnd}}</dd>
                            <dd><el-button  type="text" class="viewContract" @click.stop="showData(form.rentContractId)">查看合同</el-button></dd>
                        </dl>
                        <dl>
                            <dt>合同总金额(元)</dt>
                            <dd>{{data.accumulatedAmountReceivedCount}}</dd>
                        </dl>
                        <dl>
                            <dt>累计已收款金额(元)</dt>
                            <dd>{{data.accumulatedAmountReceived}}<a  type="text" style="margin-left: 120px;color: #1b68e8;cursor:pointer"  @click.stop="showReceivableMoneyData(form)">查看</a></dd>
                        </dl>
                        <dl>
                            <dt>累计剩余余款(元)</dt>
                            <dd>{{data.accumulatedAmountReceivedCount-data.accumulatedAmountReceived}}</dd>
                        </dl>
                        <dl>
                            <dt>付款人</dt>
                            <dd>{{form.costProjectName}}</dd>
                        </dl>
                    </div>
                </el-form>
            </div>
            <div class="card-box">
                <div class="data-title" style="margin-left: 20px">收款信息</div>
                <el-form>
                    <div class="info-list mb20" style="font-size: 16px">
                        <dl>
                            <dt>本次应收款金额(元)</dt>
                            <dd>{{form.receivableMoney}}</dd>
                        </dl>
                        <dl>
                            <dt>收款费用周期</dt>
                            <dd>{{form.costPeriodStart}}至{{form.costPeriodEnd}}</dd>
                        </dl>
                        <dl>
                            <dt>收款日期</dt>
                            <dd>{{form.receivableDate}}</dd>
                        </dl>
                        <dl>
                            <dt>本次收款金额(元)</dt>
                            <dd>{{form.receivableMoney}}</dd>
                        </dl>
                        <dl>
                            <dt>备注</dt>
                            <dd>{{form.remarks}}</dd>
                        </dl>
                    </div>
                </el-form>
            </div>
            <div class="card-box" style="text-align: right"><el-button type="primary" size="small" @click="go()">关闭</el-button></div>
        </v-dialog>
        <show-receivable ref="showReceivable"></show-receivable>
        <contract-view ref="contractView"></contract-view>
    </div>
</template>

<script>
    import {showReceivableList} from '../../../api/finance-collection-receivable'
    import showReceivable from '../edit/show-receivable'
    import contractView from "@/views/rent/contract/view.vue"
    import {getConsolidatedCollection} from '../../../api/finance-collection-actual'
    export default {
        name: "show-actual",
        components:{showReceivable,contractView},
        data(){
            return{
                form:{},
                unitPrice:'',
                dialogVisible:false,
                accumulatedAmountReceived:'',
                data:{
                    rentContract:{},
                    accumulatedAmountReceived:'',
                    accumulatedSurplus:'',
                    amountOfReceivables:'',
                    consolidatedCollectionFeeCycle:[],
                    contractId:'',
                    receivableId:'',
                    taxes:'',
                    taxAmount:'',
                    collectionRemarks:'',
                },
            }
        },
        methods:{
            show(item){
                this.dialogVisible=true
                if(item){
                    let accumulatedAmountReceived=0
                    this.form = item
                    this.unitPrice=this.form.rentAmount/this.form.buildingArea
                    showReceivableList(item.rentContractId).then(res=>{
                        this.tableData=res.data.data
                        this.tableData.map(data=> {
                            this.accumulatedAmountReceived += data.receivableMoney
                        })
                    })
                    this.accumulatedAmountReceived=accumulatedAmountReceived
                }
                getConsolidatedCollection(this.form.rentContractId,this.form.receivableId).then(resp => {
                    this.data = resp.data.data;
                })
            },
            go(){
                this.dialogVisible=false
            },
            showReceivableMoneyData(item){
                item.accumulatedAmountReceived = this.data.accumulatedAmountReceived
                item.accumulatedAmountReceivedCount = this.data.accumulatedAmountReceivedCount
                this.$refs.showReceivable.show(item)
            },
            //查看合同
            showData(contractId) {
                this.$refs.contractView.show(contractId);
                //this.$parent.$router.push({path: "/wy-rent/contract/view?id=" + contractId});
            },
            beforeClose(done) {
                done()
            }
        }
    }
</script>

<style lang='scss' scoped>
    

    @include data-title();
    @include info-list(3);
    @include formWrap(3);
</style>
